import React, {Component} from 'react'
import { is } from 'immutable'
import { Select, Icon, Row, Col } from 'antd';
import { Link } from 'react-router-dom'
import ReactDOM from 'react-dom';
const Option = Select.Option;


const input_style = {
    height: 28,
    width: 170,
    marginLeft: 5,
    marginRight: 5,
    marginBottom: 10
}


export function scrollToAnchor(hash) {
    //使用a调转时，带参数，此时浏览器的hash地址还没有改变，所以手动传给该函数
    if(!hash)
        hash = window.location.hash;
    //初始渲染component时，不带参数，使用浏览器的hash参数确定位置。
    else
        hash = '#' + hash;
    if (hash) {
        hash = hash.replace('#', '');
        const domElement = document.getElementById(hash);
        if (domElement) {
            setTimeout(() => {
                domElement.scrollIntoView();
            }, 0);
        }
    }
}

/**
 * 设置value则必须设置onChange，否则input不可编辑
 * 当value值改变时，使用redux重新render会失去焦点，解决方法 autofocus，记住上一次的焦点位置
 */
export class CusInput extends Component{

    shouldComponentUpdate(nextProps, nextState){
        return !(this.props === nextProps || is(this.props, nextProps)) ||
            !(this.state === nextState || is(this.state, nextState));
    }

    render() {

        let {pre, post, value, onChange, autoFocus, style} = this.props;
        if(!pre)
            pre = '';

        if (!post)
            post = '';

        return (
            <span>
                {pre}
                <input ref="input" style={{...input_style, ...style}} value={value} onChange={(event)=>{
                    onChange(event)
                    if(autoFocus) {
                        console.log('hello');
                    }
                }
                }/>
                {post}
            </span>

        )
    }
}

export class HashQuestion extends Component{
    componentDidMount() {

    }

    shouldComponentUpdate(nextProps, nextState){
        return !(this.props === nextProps || is(this.props, nextProps)) ||
            !(this.state === nextState || is(this.state, nextState));

    }
    render() {
        const { hash } = this.props;
        return (
            <a href={'#'+hash} onClick={()=>scrollToAnchor(hash)} tabIndex="-1"><Icon type="question-circle" style={{marginLeft:5}}/></a>
        )
    }
}

export class InputGroup extends Component{

    componentDidMount() {

    }

    shouldComponentUpdate(nextProps, nextState){
        return !(this.props === nextProps || is(this.props, nextProps)) ||
            !(this.state === nextState || is(this.state, nextState));

    }

    render() {
        const { data, title, post, style, callback, hash} = this.props;

        const list = data.get('list');
        const focusIndex = data.get('index');

        const onChange = (index, former_text) => {
            return (event) => {
                callback(event, index, former_text);
            }
        }

        return (
            <Row
                style={style}>

                <Col
                    span={6}>

                    <label>
                        {title}&nbsp;:&nbsp;
                    </label>

                </Col>

                <Col
                    span={18}>
                    {list.valueSeq().map((item, index)=>{
                        if(index == list.size-1) { //最后一个, 在末尾加上help Icon
                            return (
                                <div key={index} style={{display:'inline-block'}}>
                                    <CusInput
                                        value={item} onChange={onChange(index, item)} autoFocus={index==focusIndex}/>
                                    <HashQuestion hash={hash}/>
                                </div>

                            )
                        } else {
                            return (
                                <CusInput
                                    post={post} value={item} key={index} onChange={onChange(index,item)} autoFocus={index==focusIndex}/>
                            )
                        }

                    })}

                </Col>
            </Row>
        )
    }

}

export class CusSelector extends Component{
    componentDidMount() {

    }

    shouldComponentUpdate(nextProps, nextState){
        return !(this.props === nextProps || is(this.props, nextProps)) ||
            !(this.state === nextState || is(this.state, nextState));

    }

    render() {

        const { style, title, value, callback, list, hash} = this.props;

        return (
            <Row
                style={style}>

                <Col span={6}>
                    <label>
                        {title}&nbsp;:&nbsp;
                    </label>
                </Col>

                <Col span={18}>
                    <span style={{marginRight: 5}}/>
                    <Select
                        value={value}
                        style={{ width: 200 }}
                        onChange={(key) => {
                            callback(key);
                        }}>

                        {list.map((item, index) => {
                            return (
                                <Option key={index}>{item}</Option>
                            )
                        })}

                    </Select>
                    <HashQuestion hash={hash}/>
                </Col>
            </Row>
        )
    }
}
